{extend name="base"/}
{block name="resources"}
<link rel="stylesheet" type="text/css" href="CITY_CSS/login.css" />
{/block}
{block name="body"}
<div class="layui-layout layui-layout-admin">
	<div class="layui-header ns-login-top">
		<div class="layui-logo">
			<span class="ns-text-color ns-login-desc">多商户城市分站管理系统</span>
		</div>
		<ul class="layui-nav layui-layout-right">
			
		</ul>
	</div>

	<div class="ns-login-middel">
		<div class="ns-login-box">
			<div class="ns-login-banner">
				<div class="layui-carousel" id="test1">
					<div carousel-item>
						<div class="ns-banner-box">
							<img src="CITY_IMG/login/shanghai.png" />
							<p>上海，是中国省级行政区、直辖市、国家中心城市，中国国际经济、金融、贸易、航运、科技创新中心。</p>
						</div>
						<div class="ns-banner-box">
							<img src="CITY_IMG/login/wuhan.png" />
							<p>武汉，是湖北省省会，中部六省唯一的副省级市，特大城市，全国重要的工业基地、科教基地和综合交通枢纽 。</p>
						</div>
					</div>
				</div>
			</div>
			
			<div class="ns-login-mid"></div>
			
			<div class="layui-form login-form">
				<h1>多商户城市分站管理系统</h1>
				
				<div class="layui-form-item">
					<img class="ns-input-icon" src="SHOP_IMG/login/login_username.png" alt="">
					<input type="text" name="username" lay-verify="userName" placeholder="请输入用户名" autocomplete="off" class="layui-input">
				</div>
			
				<div class="layui-form-item">
					<img class="ns-input-icon" src="SHOP_IMG/login/login_password.png" alt="">
					<input type="password" name="password" lay-verify="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
				</div>
			
				<div class="layui-form-item verify-code-box">
					<input type="text" name="captcha" lay-verify="verificationCode" placeholder="请输入验证码" class="layui-input" value="">
					<div class="verify-code-img">
						<img id='verify_img' src="{$captcha['img']}" alt='captcha' onclick="verificationCode()" />
					</div>
				</div>
			
				<div class="layui-form-item ns-login-btn">
					<button class="layui-btn layui-btn-fluid ns-bg-color" lay-submit lay-filter="login">登 录</button>
				</div>
			</div>
		</div>
	</div>

	<div class="ns-login-bottom">
		宝宝优品城市分站
	</div>
	
</div>
{/block}
{block name="script"}
<script>
	layui.use('carousel', function() {
		var carousel = layui.carousel;
		//建造实例
		carousel.render({
			elem: '#test1',
			width: '100%', //设置容器宽度
			arrow: 'none', //始终显示箭头
			anim: 'default' //切换动画方式
		});
	});
</script>
<script>
	function verificationCode() {
		$.ajax({
			type: "get",
			url: "{:addon_url('city://city/login/captcha')}",
			dataType: "JSON",
			async: false,
			success: function(res) {
				var data = res.data;
				$("#verify_img").attr("src", data.img);
				$("input[name='captcha_id']").val(data.id);
			}
		});
	}

	layui.use('form', function() {
		var form = layui.form,
			repeat_flag = false; //防重复标识

		/**
		 * 登录
		 */
		form.on('submit(login)', function(data) {

			if (repeat_flag) return false;
			repeat_flag = true;


			$.ajax({
				type: "POST",
				url: "{:addon_url('city://city/login/login')}",
				data: data.field,
				dataType: "JSON",
				success: function(res) {
					if (res.code == 0) {
						layer.msg('登录成功', {
							anim: 5,
							time: 1000
						}, function() {
							window.location = "{:addon_url('city://city/index/index')}";
						})
					} else {
						layer.msg(res.message)
						repeat_flag = false;
						verificationCode();
					}
				}
			});
		});

		$(document).keydown(function(event) {
			if (event.keyCode == 13) {
				$(".ns-login-btn button").trigger("click");
			}
		});

		/**
		 * 表单验证
		 */
		form.verify({
			userName: function(value) {
				if (!value) {
					return "用户名不能为空";
				}
			},
			password: function(value) {
				if (!value) {
					return "密码不能为空";
				}
			},
			verificationCode: function(value) {
				if (!value) {
					return "验证码不能为空";
				}
			}

		});
	});
</script>
{/block}
